<template>
  <div class="flex items-center gap-2 mt-2 mb-2">
    <div>视图：</div>
    <Select
      :options="options"
      style="width: 150px"
      @change="handleChange"
      v-model:value="formView"
      placeholder="请选择"
      :allow-clear="true"
      :getPopupContainer="(trigger) => trigger?.parentNode"
    />
  </div>
</template>
<script lang="ts" setup>
  import { ref, watch } from 'vue';
  import { Select } from 'ant-design-vue';
  import { getFormViews } from '/@/api/process/process';
  const props = defineProps({
    formCode: {
      type: String,
      default: '',
    },
    modelValue: {
      type: String,
      default: '',
    },
  });
  const emit = defineEmits(['update:modelValue']);
  const options = ref<Recordable[]>([]);
  const formView = ref('');

  const fetch = async () => {
    if (!props?.formCode) return;
    options.value = await getFormViews({ formCode: props.formCode });
    options.value.forEach((item) => {
      item.id = '' + item.id;
      item.label = item.name;
      item.value = '' + item.id;
    });
  };
  watch(
    () => props.formCode,
    () => {
      fetch();
    },
  );
  watch(
    () => props.modelValue,
    (newVal) => {
      formView.value = newVal;
      console.log('newVal', newVal);
      if (formView.value == '-1') {
        formView.value = '';
      }
      fetch();
    },
    {
      immediate: true,
    },
  );
  const handleChange = () => {
    emit('update:modelValue', formView.value);
  };
</script>
